<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
		<uni-icons type="heart" color="white" size="38"></uni-icons>
      <text class="title">大学生心理健康服务平台</text>
      <view class="header-right">
		<text @click="switchMenu(10)">
			<uni-icons type="contact" size="24" color="white"></uni-icons>
			个人中心
		</text>
		<text @click="quit()">
        	<uni-icons type="right" size="24" color="white"></uni-icons>
        	退出登录
		</text>
      </view>
    </view>

    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 侧边菜单 -->
      <view class="sidebar">
        <view 
          v-for="(item, index) in menus" 
		  v-if="auth>=(item.auth+1)"
          :key="index"
          class="menu-item"
          :class="{ active: activeIndex === index }"
          @click="switchMenu(index)"
        >
          <uni-icons :type="item.icon" size="28" class="menu-icon" color="#2196F3"></uni-icons>
          <text class="menu-text">{{ item.name }}</text>
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="content" :style="{ overflowY: activeIndex === 1 ? 'visible' : 'auto' }">
        <view v-if="activeIndex === 0">
			<dataTableVue></dataTableVue>
        </view>

        <!-- 在线咨询模块 -->
        <view v-if="activeIndex === 1" class="module-card">
          <chatVue class="chatVue"  :style="{ height: chatVueHeight + 'px' }"></chatVue>
        </view>

        <!-- 预约记录模块 -->
        <view v-if="activeIndex === 2" class="module-card">
          预约记录模块
		  <view>
		  	测试vueX: npm install vuex --save
		  	1.在项目的src目录下创建一个store文件夹，然后在该文件夹中创建一个index.js文件，用于定义和配置Vuex store。
		  	 <view>{{ count }}</view>
		  	<button @click="increment">增加</button>
		  </view>
        </view>

		<view v-if="activeIndex === 3" class="module-card">
          <postVue ></postVue>
        </view>
		<view v-if="activeIndex === 4" class="module-card">
			<questionnaireListVue></questionnaireListVue>
		</view>
        <!-- 其他模块... -->
		<view v-if="activeIndex === 10" class="module-card">
			<personInfoVue></personInfoVue>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
import dataTableVue from '../dataTable/dataTable.vue';
import questionnaireListVue from '../questionnaireList/questionnaireList.vue';
import postVue from '../post/post.vue';
import chatVue from '../chat/chat.vue';
import { mapState } from 'vuex';
import personInfoVue from '../personInfo/personInfo.vue';
import methodY from '../../util/methodY';
	export default {
		components: {
		    dataTableVue,
			postVue,
			chatVue,
			questionnaireListVue,
			personInfoVue
		},
		data() {
			return {
				menus : [
				  { name: '首页', icon: 'home',auth:0 },
				  { name: '在线咨询', icon: 'chat',auth:0 },
				  { name: '预警管理', icon: 'calendar',auth:1 },
				  { name: '匿名树洞', icon: 'chatboxes',auth:0 },
				  { name: '心理健康评估', icon: 'staff-filled',auth:0 },
				  { name: '资源中心', icon: 'pulldown',auth:0 }
				],
				activeIndex:0,
				showQuestionnaire:true,
				chatVueHeight:0,
				auth:0,
			}
		},
		onLoad() {
			const res=uni.getStorageSync('userInfo')
			if(res==null){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		},
		async mounted() {
		 	this.handlechatVueHeightChange();
			this.auth=uni.getStorageSync('userInfo').auth;
		 },
		computed: {
				 ...mapState(['count'])
			   //  count() {
				  // //this.$store.getters.count  this.$store.state.count 
			   //    return this.$store.state.count
			   //  }
		},
		 watch: {
			count(newVal, oldVal) {
			    console.log('count changed from ' + oldVal + ' to ' + newVal);
			    // 这里你可以根据新的值进行相应的操作
			 }
		},
		methods: {
			increment() {
			  //this.$store.dispatch('increment')
			  this.$store.commit("increment")
			},
			switchMenu(index) {
				this.activeIndex = index;
			  // 这里可以添加加载对应模块数据的逻辑
			},
			handleAssessmentResult(result) {
			    console.log('评估结果:', result)
			    uni.showModal({
					title: `评估完成 - ${result.questionnaireTitle}`,
			        content: `您的总分: ${result.totalScore}\n评估结果: ${result.assessment}`,
			        showCancel: false
			    })
			},
			handlechatVueHeightChange(){
				uni.getSystemInfo({
					success:  (info)=> {
						console.log('屏幕的高度：' + info.windowHeight);
						const query = uni.createSelectorQuery().in(this);
						query.select('.header').boundingClientRect(data => {
						    if (data) {
								   //let rpxHeight = data.height * (uni.getSystemInfoSync().windowWidth / 375);
								   this.chatVueHeight=info.windowHeight-data.height-info.statusBarHeight-2* uni.upx2px(24); // 自动根据当前设备计算;
						    }
						}).exec();
					}
				});
			},
			quit(){
				methodY.util.clearUserInfo();
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		},
	}
</script>

<style lang="scss">
/* 通用样式 */
$primary-color: #2196F3;
$sidebar-width: 400rpx;

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

/* 头部样式 */
.header {
  height: 120rpx;
  background: $primary-color;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);

  .title {
    font-size: 40rpx;
    font-weight: 500;
    margin-left: 16rpx;
    flex: 1;
  }

  .header-right {
    display: flex;
    gap: 20rpx;
  }
}

/* 主体内容布局 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 侧边菜单样式 */
.sidebar {
  width: $sidebar-width;
  background: #fff;
  border-right: 1rpx solid #eee;
  overflow-y: auto;
  padding: 16rpx 0;

  .menu-item {
    display: flex;
    align-items: center;
    padding: 20rpx 34rpx;
    margin: 24rpx 22rpx;
    border-radius: 8rpx;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      background: #f0f7ff;
    }

    &.active {
      background: #e3f2fd;
      color: $primary-color;
      font-weight: 400;
    }
  }

  .menu-icon {
    margin-right: 12rpx;
  }
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 24rpx;
  .chatVue{
	display: flex;
	flex-direction: row; /* 水平排列（默认值） */
  }
}

/* 模块卡片样式 */
.module-card {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 180px;
    
    .menu-text {
      display: none;
    }
    
    .menu-icon {
      margin-right: 0;
    }
  }

  .content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 60px;
    
    .menu-item {
      justify-content: center;
      padding: 14px;
    }
  }
  
  .header {
    padding: 0 12px;
    
    .title {
      font-size: 16px;
    }
  }
}
</style>
